<template>
    <div class="container">
        <h3>鼠标在页面的位置：x-{{x}} y-{{y}}</h3>
        <header :class="{fixed: top > 200}">
            <input v-model="todo" placeholder="想干的事" @keyup.enter="add"/>
            <label><input type="checkbox" placeholder="全部完成了" v-model="allDone">全选</label>
        </header>
        <ul>
            <li v-for="(todo,index) in todos">
                <label><input type="checkbox" v-model="todo.completed">{{todo.title}}</label>
                <button @click="deleteItem(index)">×</button>
            </li>
        </ul>
        <footer>
            <strong>还有{{remaining}}条</strong>
            <button v-show="todos.length>remaining" @click="removeCompleted">清除完成的条目</button>
        </footer>
    </div>
</template>

<script>
    import {reactive, toRefs, computed} from 'vue'
    import useScroll from "./scroll";
    import useMousePosition from "./mouse";

    export default {
        name: "Todos",
        setup() {
            const state = reactive({
                todo: '',
                todos: [
                    {
                        id: '1',
                        title: '早睡',
                        completed: true
                    }, {
                        id: '2',
                        title: '早起',
                        completed: false
                    }, {
                        id: '3',
                        title: '学习',
                        completed: true
                    }, {
                        id: '4',
                        title: '打卡',
                        completed: false
                    }, {
                        id: '5',
                        title: '打坐',
                        completed: false
                    },
                ]
            })
            const add = () => {
                if (!state.todo.trim()) {
                    return
                }
                state.todos.push({
                    id: state.todos.length + 1,
                    title: state.todo,
                    completed: false
                })
                state.todo = ''
            }
            const deleteItem = index => {
                state.todos.splice(index, 1)
            }
            const remaining = computed(() => {
                return state.todos.filter(item => !item.completed).length
            })
            const allDone = computed({
                get: () => {
                    return remaining.value === 0 // computed属性的值也可以通过.value来获取
                },
                set: (value) => {
                    state.todos.forEach(todo => {
                        todo.completed = !!value // 若不强制转化成布尔值，编辑器会警告
                    })
                }
            })
            const removeCompleted = () => {
                state.todos = state.todos.filter(todo => !todo.completed)
            }
            const {top} = useScroll();
            const{x,y} = useMousePosition();
            return {...toRefs(state), add, allDone, remaining, removeCompleted, top, deleteItem,x,y}
        }
    }
</script>

<style scoped>
    .container {
        margin-top: 10rem;
        border: .125rem solid #eee;
        overflow: auto;
    }

    ul > li {
        line-height: 6rem;
    }

    header.fixed {
        position: fixed;
        left: 0;
        top: 28rem;
        padding: 1rem;
        width: 100%;
        background: #fff;
        box-shadow: .5rem .5rem 1rem .5rem #cccc;
    }
</style>